<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>点击添加坐标标记</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html, body, #container {
      height: 100%;
      width: 100%;
    }
    .coordinate-label {
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      padding: 5px;
      border: 1px solid #25A5F7;
      border-radius: 3px;
      font-size: 12px;
      z-index: 10;
      transform: translate(-50%, -100%);
      top: -10px;
      left: 50%;
      white-space: normal; /* 允许换行 */
      text-align: center; /* 文本居中 */
      min-width: 180px; /* 确保足够宽 */
    }
  </style>
</head>
<body>
  <div id="container"></div>
  
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=9198a91f771cb1510c19856c02d42341"></script>
  <script type="text/javascript">
    var map = new AMap.Map("container", {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 13
    });

    // 添加地图点击事件监听
    //map.on('click', function(e) {
    //  addMarkerAtPosition(e.lnglat);
    //});

    // 供Qt调用的函数：移动中心点并添加标记
    function addMarker(lon, lat) {
      var position = new AMap.LngLat(lon, lat);
      map.setCenter(position); // 移动地图中心
      map.setZoom(16); // 设置缩放级别
      addMarkerAtPosition(position); // 调用原有标记函数
    }


    // 在点击位置添加标记并显示坐标和时间戳
    function addMarkerAtPosition(lnglat) {
      // 获取当前时间并格式化为字符串
      var now = new Date();
      var timeString = now.getFullYear() + '-' + 
                       (now.getMonth()+1).toString().padStart(2, '0') + '-' + 
                       now.getDate().toString().padStart(2, '0') + ' ' + 
                       now.getHours().toString().padStart(2, '0') + ':' + 
                       now.getMinutes().toString().padStart(2, '0') + ':' + 
                       now.getSeconds().toString().padStart(2, '0');
      
      // 创建坐标文本（包含时间戳和经纬度）
      var coordText = document.createElement("div");
      coordText.className = 'coordinate-label';
      // 添加时间戳和坐标信息
      coordText.innerHTML = timeString + '<br>' + lnglat.lng.toFixed(6) + ', ' + lnglat.lat.toFixed(6);
      
      // 创建标记内容容器 
      var markerContent = document.createElement("div");
      markerContent.style.position = 'relative';
      
      // 添加标记图标
      var markerImg = document.createElement("img");
      markerImg.src = "qrc:/image/html/point_icon.png";
      markerImg.style.width = '25px';
      markerImg.style.height = '34px';
      
      // 组合元素
      markerContent.appendChild(coordText);
      markerContent.appendChild(markerImg);
      
      // 创建标记 
      var marker = new AMap.Marker({
        position: [lnglat.lng, lnglat.lat],
        content: markerContent,
        offset: new AMap.Pixel(-12.5, -34) // 居中定位
      });
      
      marker.setMap(map);

      // 移动地图到最新标记点
      map.setCenter([lnglat.lng, lnglat.lat]);
      map.setZoom(16);
    }
  </script>
</body>
</html>